<template>
	<b-layout-index>
		<navbar :title="$t('提现管理')"></navbar>

		<view class="container">


			<!-- 状态标签栏 -->
			<scroll-view class="tab-scroll" scroll-x>
				<view class="tab-container">
					<view v-for="(tab, index) in list1" :key="index"
						:class="['tab-item', currentTab === index ? 'tab-active' : '']" @tap="click(tab,index)">
						<text>{{ $t(tab.name) }}</text>
					</view>
				</view>
			</scroll-view>

			<!-- 提现记录列表 -->
			<view class="record-scroll" >
				<view class="record-list">
					<view v-for="(item, index) in datalist" :key="index" class="record-item" @tap="goToDetail(item)">
						
						<view class="record-main">
							<text class="record-name">{{ item.name }}</text>
							<view class="record-amount">
								<view class="amount-item">
									<text class="amount-label">{{$t('提现金额')}}：</text>
									<text class="amount-value">¥{{ item.amount }}</text>
								</view>
								<view class="amount-item ">
									<text class="amount-label record-time">{{$t('当前金额')}}：</text>
									<text class="amount-value record-time">¥{{ item.balance }}</text>
								</view>
							</view>
							<text class="record-time">{{$t('时间')}}：{{$u.date(item.createDate,'yyyy-mm-dd MM:ss')}}</text>
						</view>
						<view class="record-status">
							<text class="status-text">{{ $t(listStatus[item.status]['name']) }}</text>
							<u-icon :name="isUg?'arrow-left':'arrow-right'" size="16" color="#CCCCCC" />
							
						</view>
					</view>
				</view>
			</view>
		</view>



	</b-layout-index>
</template>

<script>
	import {
		findByPageWithdrawalList
	} from "@/api/userWallet.js";
	export default {
		data() {
			return {

				datalist: [],
				page: 0,
				type: 0,
				currentTab: 0,
				list1: [{
						icon: 'icon-qianbao',
						name: this.$t("全部"),
						status: 0
					},
					{
						icon: 'icon-chazhao',
						name: this.$t("审核中"),
						status: 2
					},
					{
						icon: 'icon-tuisong',
						name: this.$t("已通过"),
						status: 1
					},
					{
						icon: 'icon-shangcheng',
						name: this.$t("未通过"),
						status: 3
					}
				],
				listStatus: {
					0: {
						icon: 'icon-qianbao',
						name: "全部",
						status: 0
					},
					2: {
						icon: 'icon-chazhao',
						name: "审核中",
						status: 2
					},
					1: {
						icon: 'icon-tuisong',
						name: "已通过",
						status: 1
					},
					3: {
						icon: 'icon-shangcheng',
						name: "未通过",
						status: 3
					}
				}

			}
		},
		onLoad: function() {
			this.fetchByPageWithdrawalList()
		},
		onReachBottom: function() {
			var page = this.page;
			if (page > -1) {
				page++;
				this.page = page;
				this.fetchByPageWithdrawalList()
			}
			console.log("onReachBottom")
		},
		methods: {
			fetchByPageWithdrawalList: function() {
				var datalist = this.datalist;
				findByPageWithdrawalList(this.page, this.type).then(res => {

					if (res.length < 10) {
						this.page = -1
					}
					datalist = datalist.concat(res)
					this.datalist = datalist
				})
			},
			click: function(e,index) {
				console.log(e)
				this.currentTab=index
				this.type = e.status
				this.datalist = []
				this.page = 0
				this.fetchByPageWithdrawalList()
			},goToDetail(item){
				uni.navigateTo({
					url:"/page/manager/pages/finance/withdrawal/show?id="+item.id
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #F5F5F5;
	}

	.nav-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 32rpx;
		background-color: #FFFFFF;
	}

	.nav-title {
		font-size: 14px;
		font-weight: 500;
		color: #333333;
	}

	.nav-left,
	.nav-right {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tab-scroll {
		background-color: #FFFFFF;
		border-bottom: 1px solid #EEEEEE;
	}

	.tab-container {
		display: flex;
		height: 88rpx;
		padding: 0 32rpx;
	}

	.tab-item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		font-size: 12px;
		color: #666666;
	}

	.tab-active {
		color: #2979FF;
		position: relative;
	}

	.tab-active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #2979FF;
		border-radius: 2rpx;
	}

	.record-scroll {
		flex: 1;
	
	}

	.record-list {
		padding: 24rpx;
	}

	.record-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		padding: 24rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
	}

	.record-main {
		flex: 1;
	}

	.record-name {
		font-size: 14px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 16rpx;
	}

	.record-amount {
		margin-bottom: 16rpx;
	}

	.amount-item {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.amount-label {
		font-size: 12px;
		color: #666666;
	}

	.amount-value {
		font-size: 12px;
		color: #333333;
		font-weight: 500;
	}

	.record-time {
		font-size: 12px;
		color: #999999;
	}

	.record-status {
		display: flex;
		align-items: center;
		margin-left: 24rpx;
	}

	.status-text {
		font-size: 10px;
		color: #2979FF;
		margin-right: 8rpx;
	}
</style>